<template>
    <div>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据管理</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片试图 -->
      <el-card class="box-card">
        <div id="main"></div>
      </el-card>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {

    }
  },

  created() {
    
  },

  mounted () {
    this.initEcharts()
  },

  methods: {
    async initEcharts () {
      const {data: res} = await this.$axios.get('reports/type/1')
      console.log(res)
      // 去掉两边留白
      res.data.xAxis[0].boundaryGap = false
      // 添加提示
      res.data.tooltip = {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      }
      // 添加标题
      res.data.title = {
        text: '用户来源'
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption(res.data);
    }
  }
};
</script>

<style scoped lang='less'>
#main {
  width: 800px;
  height: 500px;
}
</style>
